<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="/css/bootstrap.css"/>
	<link rel="stylesheet" href="/css/assets/custom.css" />
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
</head>
<style>
	body
	{
		background-color:#99BBFF;
	}
</style>
<body>
<div id="app">
	<div class="row">
		<div class="col-xs-offset-2 col-xs-8">
			<div class="page-header">
				<h2>Wonderful tin仓库管理系统</h2>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-2 col-xs-offset-2">
			<div class="list-group">
				<a class="list-group-item" v-link="{ path: '/home'}">主页</a>
				<a class="list-group-item" v-link="{ path: '/about'}">设置</a>
			</div>
		</div>
		<div class="col-xs-6">
			<div class="panel">
				<div class="panel-body">
					<router-view></router-view>
				</div>
			</div>
		</div>
	</div>
</div>

<template id="home">
	<div>
		<h1>主页</h1>
		<p>{{msg}}</p>
	</div>
	<div>
		<ul class="nav nav-tabs">
			<li>
				<a v-link="{ path: '/home/news'}">功能设置</a>
			</li>
			<li>
				<a v-link="{ path: '/home/message'}">消息设置</a>
			</li>
		</ul>
		<router-view></router-view>
	</div>
</template>

<template id="news">
	<ul>
		<li>News 01</li>
		<li>News 02</li>
		<li>News 03</li>
	</ul>
</template>
<template id="message">
	<ul>
		<li>Message 01</li>
		<li>Message 02</li>
		<li>Message 03</li>
	</ul>
</template>

<template id="about">
	<div>
		<h1>设置</h1>
		<a v-link="{ path: '/about/setting'}">主页</a>
	</div>
</template>

<template id="setting">
	<el-table
			:data="tableData"
			border
			style="width: 100%">
		<el-table-column
				label="日期"
				width="180">
			<template scope="scope">
				<el-icon name="time"></el-icon>
				<span style="margin-left: 10px">{{ scope.row.date }}</span>
			</template>
		</el-table-column>
		<el-table-column
				label="姓名"
				width="180">
			<template scope="scope">
				<el-popover trigger="hover" placement="top">
					<p>姓名: {{ scope.row.name }}</p>
					<p>住址: {{ scope.row.address }}</p>
					<div slot="reference" class="name-wrapper">
						<el-tag>{{ scope.row.name }}</el-tag>
					</div>
				</el-popover>
			</template>
		</el-table-column>
		<el-table-column label="操作">
			<template scope="scope">
				<el-button
						size="small"
						@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
				<el-button
						size="small"
						type="danger"
						@click="handleDelete(scope.$index, scope.row)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
</template>

</body>
<script src="/js/vue.js"></script>
<script src="/js/vue-router.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var Main = {
        template:'setting',
        data:function(){
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        methods:{
            handleEdit:function(index, row) {
                console.log(index, row);
				//alert(1);
            },
            handleDelete:function(index, row) {
                console.log(index, row);
            }
        }
    }

    var Home = Vue.extend({
        template: '#home',
        data: function() {
            return {
                msg: '欢迎来到Wonderful登陆界面'
            }
        }
    })

    var News = Vue.extend({
        template: '#news'
    })

    var Message = Vue.extend({
        template: '#message'
    })

    var About = Vue.extend({
        template: '#about'
    })

    var router = new VueRouter()
    router.redirect({
        '/': '/home'
    })
    router.map({
        '/home': {
            component: Home,
            // 定义子路由
            subRoutes: {
                '/news': {
                    component: News
                },
                '/message': {
                    component: Message
                }
            }
        },
        '/about': {
            component: About
        }
    })

    var App = Vue.extend({})
    router.start(App, '#app')


</script>

</html>